<template>
    <div class="main">
        <section>
            <div class="taxTitle">
                <span>分类简称</span>
                <span>分类编码</span>
                <span>适用税率</span>
                <span>是否含税</span>
            </div>
            <el-tree :data="list" :props="defaultProps" :render-content="renderContent"></el-tree>
        </section>         
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [],
            defaultProps:{
                children: 'children',
                label: 'taxName'
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList(){
            this.listLoading = true
            this.request({
                url: '/invoice-web-manage/invoice/tax-item/all',
                method: 'get',
            }).then((res) => {
                this.list = res.data
                this.listLoading = false
            }).catch(err => {
                console.log(err)
                this.list = []
                this.listLoading = false
            })
        },
        renderContent(h, { node, data, store }) {
            return (
            <span class="custom-tree-node">
                <span>{node.label}</span>
                <span>{data.taxCode}</span>
                <span>{data.taxRate}</span>
                <span>{data.taxFlag}</span>
            </span>)
        }
    }
}
</script>
<style  lang="scss">
    .taxTitle{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        padding-right: 8px;
        flex: 1;
        font-weight: bold;
        margin-bottom: 10px;
    }
  .custom-tree-node {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
        flex: 1
        // span{
            
        // }
  }
</style>